<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside class="home-aside" width="250px">
      <!-- logo -->
      <div class="home-logo-div" v-if="!isOwner">
        <router-link to="/customer/home">
          <el-image
            class="home-logo"
            src="../src/assets/logo_trans.png"
            fit="contain"
          ></el-image
        ></router-link>
      </div>
      <div class="home-logo-div" v-if="isOwner">
        <router-link to="/owner/home">
          <el-image
            class="home-logo"
            src="../src/assets/logo_trans.png"
            fit="contain"
          ></el-image
        ></router-link>
      </div>
      <!-- 折叠icon -->
      <el-icon
        class="toggle-button"
        v-model="isCollapse"
        @click="toggleCollapse"
        size="20px"
      >
        <Fold v-if="!isCollapse" />
        <Expand v-if="isCollapse" />
      </el-icon>
      <!-- 侧边栏菜单 -->
      <el-menu
        class="home-menu-vertical"
        :collapse="isCollapse"
        :default-active="$route.path"
        router
        active-text-color="#E3A566"
        v-if="!isOwner"
      >
        <el-menu-item index="/customer/food">
          <el-icon><Search /></el-icon>
          <span slot="title">菜品列表</span>
        </el-menu-item>
        <el-menu-item index="/customer/recommend">
          <el-icon><MagicStick /></el-icon>
          <span slot="title">猜你想吃</span>
        </el-menu-item>
        <el-menu-item index="/customer/order">
          <el-icon><Wallet /></el-icon>
          <span slot="title">我的订单</span>
        </el-menu-item>
        <el-menu-item index="/customer/account">
          <el-icon><User /></el-icon>
          <span slot="title">我的账号</span>
        </el-menu-item>
      </el-menu>
      <el-menu
        class="home-menu-vertical"
        :collapse="isCollapse"
        :default-active="$route.path"
        router
        v-if="isOwner"
      >
        <el-menu-item index="/owner/food">
          <el-icon>
            <Edit />
          </el-icon>
          <span slot="title">菜品管理</span>
        </el-menu-item>
        <el-menu-item index="/owner/order">
          <el-icon>
            <Bell />
          </el-icon>
          <span slot="title">订单管理</span>
        </el-menu-item>
        <el-menu-item index="/owner/account">
          <el-icon>
            <User />
          </el-icon>
          <span slot="title">我的账号</span>
        </el-menu-item>
      </el-menu>
      <el-image src="../src/assets/plate.png" class="plate-div"></el-image>
    </el-aside>

    <el-container>
      <!-- 头部 -->
      <el-header class="fooddetail-header" height="40px">
        <div class="ball"></div>
        <div class="food-line"></div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/customer/home' }" v-if="!isOwner">
            主页
          </el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/customer/food' }" v-if="!isOwner"
            >菜品列表</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ path: '/owner/home' }" v-if="isOwner">
            主页
          </el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/owner/food' }" v-if="isOwner"
            >菜品列表</el-breadcrumb-item
          >
          <el-breadcrumb-item>菜品详情</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>

      <!-- 主体 -->
      <el-main class="home-main">
        <el-scrollbar height="590px">
          <!-- 食物卡片 -->
          <el-card :body-style="{ padding: '0px' }" class="fooddetail-card">
            <el-button class="flavor-card-2-return" type="warning" text @click="gotoFood"
              ><el-icon size="30px">
                <Back />
              </el-icon>
            </el-button>
            <!-- 左侧图像 -->
            <el-image class="fooddetail-image" :src="foodDtoEntity.photo" fit="cover">
            </el-image>
            <!-- 右侧信息 -->
            <div class="fooddetail-info">
              <div class="fooddetail-title">{{ foodDtoEntity.foodName }}</div>
              <el-divider content-position="left">基本信息</el-divider>
              <el-descriptions :column="2" class="fooddetail-des">
                <el-descriptions-item label="价格"
                  >￥ {{ foodDtoEntity.price }}</el-descriptions-item
                >
                <el-descriptions-item label="类别">
                  <el-tag>{{ foodDtoEntity.label }}</el-tag></el-descriptions-item
                >
                <el-descriptions-item label="评分">
                  <el-rate
                    v-model="foodDtoEntity.foodScore"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value} 分"
                /></el-descriptions-item>
                <el-descriptions-item label="销量">
                  {{ foodDtoEntity.saleNumber }}
                </el-descriptions-item>
              </el-descriptions>
              <el-divider content-position="left">口味指数</el-divider>
              <el-descriptions :column="2" class="fooddetail-des">
                <el-descriptions-item label="辣">
                  <el-rate
                    v-model="foodDtoEntity.foodFlavor.spicy"
                    :colors="['#409eff', '#67c23a', '#FF9900']"
                    disabled
                /></el-descriptions-item>
                <el-descriptions-item label="甜">
                  <el-rate
                    v-model="foodDtoEntity.foodFlavor.sweet"
                    :colors="['#409eff', '#67c23a', '#FF9900']"
                    disabled
                /></el-descriptions-item>
                <el-descriptions-item label="咸">
                  <el-rate
                    v-model="foodDtoEntity.foodFlavor.salted"
                    :colors="['#409eff', '#67c23a', '#FF9900']"
                    disabled /></el-descriptions-item
                ><el-descriptions-item label="酸">
                  <el-rate
                    v-model="foodDtoEntity.foodFlavor.acid"
                    :colors="['#409eff', '#67c23a', '#FF9900']"
                    disabled /></el-descriptions-item
                ><el-descriptions-item label="重口">
                  <el-rate
                    v-model="foodDtoEntity.foodFlavor.heavyTaste"
                    :colors="['#409eff', '#67c23a', '#FF9900']"
                    disabled /></el-descriptions-item
                ><el-descriptions-item label="热">
                  <el-rate
                    v-model="foodDtoEntity.foodFlavor.hotLevel"
                    :colors="['#409eff', '#67c23a', '#FF9900']"
                    disabled
                /></el-descriptions-item>
              </el-descriptions>
            </div>
          </el-card>
          <el-divider content-position="left"></el-divider>
          <!-- 评论归纳 -->
          <el-row class="fooddetail-classify-row" :gutter="4">
            <!-- 好评 -->
            <el-col :span="2"
              ><el-button
                round
                @click="searchGoodComment"
                :class="goodIsSelected ? 'selectedLevelButton' : 'levelButton'"
                ><svg
                  t="1701072920317"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="5235"
                  width="20"
                  height="20"
                >
                  <path
                    d="M509.4 958.2c-60.4 0-118.9-11.9-174.1-35.1-53.2-22.5-101.1-54.8-142.1-95.9-41-41-73.3-88.9-95.9-142.1C74 629.9 62.2 571.4 62.2 511S74 392.1 97.3 337c22.5-53.2 54.8-101.1 95.9-142.1 41-41 88.9-73.3 142.1-95.9C390.5 75.7 449 63.9 509.4 63.9S628.3 75.7 683.5 99c53.2 22.5 101.1 54.8 142.1 95.9 41 41 73.3 88.9 95.9 142.1 23.3 55.2 35.1 113.7 35.1 174.1 0 60.4-11.9 118.9-35.1 174.1-22.5 53.3-54.8 101.1-95.9 142.1-41 41-88.9 73.3-142.1 95.9-55.2 23.2-113.7 35-174.1 35z m0-827.9c-209.9 0-380.7 170.8-380.7 380.7s170.8 380.7 380.7 380.7S890.1 720.9 890.1 511 719.3 130.3 509.4 130.3z"
                    fill="#d81e06"
                    p-id="5236"
                  ></path>
                  <path
                    d="M341.6 410.1m-55.9 0a55.9 55.9 0 1 0 111.8 0 55.9 55.9 0 1 0-111.8 0Z"
                    fill="#d81e06"
                    p-id="5237"
                  ></path>
                  <path
                    d="M677.2 409m-55.9 0a55.9 55.9 0 1 0 111.8 0 55.9 55.9 0 1 0-111.8 0Z"
                    fill="#d81e06"
                    p-id="5238"
                  ></path>
                  <path
                    d="M515.3 733.1c-88 0-153.8-69.7-156.6-72.8-11.3-12.1-10.6-31.1 1.6-42.4 12.1-11.3 31.1-10.6 42.3 1.5 0.9 0.9 51.4 53.7 112.7 53.7h2.3c34.6-0.8 67.4-19 97.7-54.2 10.8-12.6 29.8-14 42.3-3.2 12.6 10.8 14 29.8 3.2 42.3-42 48.8-89.9 74-142.4 75-1 0.1-2.1 0.1-3.1 0.1z"
                    fill="#d81e06"
                    p-id="5239"
                  ></path></svg
                >好评</el-button
              ></el-col
            >
            <!-- 中评 -->
            <el-col :span="2"
              ><el-button
                round
                @click="searchMidComment"
                :class="midIsSelected ? 'selectedLevelButton' : 'levelButton'"
                ><svg
                  t="1701072102751"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4127"
                  width="20"
                  height="20"
                >
                  <path
                    d="M509.4 958.2c-60.4 0-118.9-11.9-174.1-35.1-53.2-22.5-101.1-54.8-142.1-95.9-41-41-73.3-88.9-95.9-142.1C74 629.9 62.2 571.4 62.2 511S74 392.1 97.3 337c22.5-53.2 54.8-101.1 95.9-142.1 41-41 88.9-73.3 142.1-95.9C390.5 75.7 449 63.9 509.4 63.9S628.3 75.7 683.5 99c53.2 22.5 101.1 54.8 142.1 95.9 41 41 73.3 88.9 95.9 142.1 23.3 55.2 35.1 113.7 35.1 174.1S944.7 630 921.5 685.2c-22.5 53.3-54.8 101.1-95.9 142.1-41 41-88.9 73.3-142.1 95.9-55.2 23.2-113.7 35-174.1 35z m0-827.9c-209.9 0-380.7 170.8-380.7 380.7s170.8 380.7 380.7 380.7S890.1 720.9 890.1 511 719.3 130.3 509.4 130.3z"
                    fill="#f2b941"
                    p-id="4128"
                  ></path>
                  <path
                    d="M341.6 410.1m-55.9 0a55.9 55.9 0 1 0 111.8 0 55.9 55.9 0 1 0-111.8 0Z"
                    fill="#f2b941"
                    p-id="4129"
                  ></path>
                  <path
                    d="M677.2 409m-55.9 0a55.9 55.9 0 1 0 111.8 0 55.9 55.9 0 1 0-111.8 0Z"
                    fill="#f2b941"
                    p-id="4130"
                  ></path>
                  <path
                    d="M637.1 702.6h-256c-16.6 0-30-13.4-30-30s13.4-30 30-30h256c16.6 0 30 13.4 30 30s-13.5 30-30 30z"
                    fill="#f2b941"
                    p-id="4131"
                  ></path></svg
                >中评</el-button
              ></el-col
            >
            <!-- 差评 -->
            <el-col :span="2"
              ><el-button
                round
                @click="searchLowComment"
                :class="lowIsSelected ? 'selectedLevelButton' : 'levelButton'"
                ><svg
                  t="1701072607600"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2411"
                  width="20"
                  height="20"
                >
                  <path
                    d="M509.4 958.2c-60.4 0-118.9-11.9-174.1-35.1-53.2-22.5-101.1-54.8-142.1-95.9-41-41-73.3-88.9-95.9-142.1C74 629.9 62.2 571.4 62.2 511S74 392.1 97.3 337c22.5-53.2 54.8-101.1 95.9-142.1 41-41 88.9-73.3 142.1-95.9C390.5 75.7 449 63.9 509.4 63.9S628.3 75.7 683.5 99c53.2 22.5 101.1 54.8 142.1 95.9 41 41 73.3 88.9 95.9 142.1 23.3 55.2 35.1 113.7 35.1 174.1S944.7 630 921.5 685.2c-22.5 53.3-54.8 101.1-95.9 142.1-41 41-88.9 73.3-142.1 95.9-55.2 23.2-113.7 35-174.1 35z m0-827.9c-209.9 0-380.7 170.8-380.7 380.7s170.8 380.7 380.7 380.7S890.1 720.9 890.1 511 719.3 130.3 509.4 130.3z"
                    fill="#7eae0a"
                    p-id="2412"
                  ></path>
                  <path
                    d="M341.6 410.1m-55.9 0a55.9 55.9 0 1 0 111.8 0 55.9 55.9 0 1 0-111.8 0Z"
                    fill="#7eae0a"
                    p-id="2413"
                  ></path>
                  <path
                    d="M677.2 409m-55.9 0a55.9 55.9 0 1 0 111.8 0 55.9 55.9 0 1 0-111.8 0Z"
                    fill="#7eae0a"
                    p-id="2414"
                  ></path>
                  <path
                    d="M518.4 608.5c52.5 1 100.4 26.2 142.4 75 10.8 12.5 9.4 31.5-3.2 42.3-12.5 10.8-31.5 9.4-42.3-3.2-30.3-35.2-63.1-53.4-97.7-54.2h-2.3c-61.3 0-111.8 52.8-112.7 53.7-11.2 12.1-30.2 12.8-42.3 1.5-12.2-11.3-12.9-30.3-1.6-42.4 2.8-3.1 68.6-72.8 156.6-72.8 1 0 2.1 0 3.1 0.1z"
                    fill="#7eae0a"
                    p-id="2415"
                  ></path></svg
                >差评</el-button
              ></el-col
            >
            <el-col :span="1"></el-col>
            <!-- 评价归纳的关键词 -->
            <el-col :span="2" v-for="commentLabel in commentLabelList"
              ><el-button
                round
                @click="searchCommentByLabel(commentLabel)"
                :class="isSelected[commentLabel] ? 'selectedButton' : 'originButton'"
                >{{ commentLabel }}</el-button
              ></el-col
            >
          </el-row>
          <!-- 评论卡片 -->
          <el-card :body-style="{ padding: '0px' }" class="fooddetail-card">
            <el-row>
              <el-col
                :span="24"
                v-for="commentEntity in foodDtoEntity.commentList"
                :key="commentEntity.id"
              >
                <!-- 评论左侧 -->
                <div class="comment-left">
                  <el-avatar
                    class="comment-avatar"
                    :src="commentEntity.user.avatar"
                    fit="cover"
                    :size="60"
                  >
                  </el-avatar>
                  <div class="comment-username">{{ commentEntity.user.username }}</div>
                </div>
                <!-- 评论右侧 -->
                <div class="comment-right">
                  评分：
                  <el-rate
                    v-model="commentEntity.foodscore"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value} points"
                  />
                  <div>{{ commentEntity.comment }}</div>
                </div>
              </el-col>
            </el-row>
          </el-card>
          <div class="pagination">
            <el-pagination
              background
              :current-page="pagination.currentPage"
              :page-size="pagination.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.totalCount"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </el-scrollbar>
      </el-main>
      <!-- 回到顶部 -->
      <el-backtop :right="80" :bottom="100" />
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false, //是否折叠侧边栏
      foodDtoEntity: { foodFlavor: {} },
      userEntity: {
        id: 1,
        username: 2654787851,
        password: 123,
        nativeplace: 456,
        gender: 1,
        level: 1,
        avatar: "../src/assets/default.jpg",
        predictedByFilter: 2,
      },
      lastpage: "",
      pagination: {
        currentPage: 1, // 起始页
        pageSize: 10, // 每页的数据
        totalCount: 0, // 总数据
      },
      commentLabelList: [],
      selectTag: [], //查找的评论关键词
      selectLevel: "", //查找的评论等级 好/中/差
      isSelected: {}, // 控制关键词按钮的状态
      goodIsSelected: false,
      midIsSelected: false,
      lowIsSelected: false,
      recognizeResult: [],
      isOwner: false,
    };
  },
  created() {
    this.account = JSON.parse(this.$store.state.account);
    this.isOwner = this.account.role === 'owner' ? true : false;
    this.lastpage = history.state.lastpage;
    console.log("获取详情的食品的id为", history.state.foodID);
    // 获取该food的基本信息
    let url = "/foods/id/" + history.state.foodID;
    let _this = this;
    this.$http.get(url).then(function (response) {
      _this.foodDtoEntity = response.data;

      // 设置评论的关键词
      if (response.data.tag != null) {
        let tagList = response.data.tag.split(",");
        let tagNum = tagList.length - 1;
        //将获取到的关键词数组转换为proxy类型
        _this.commentLabelList = new Proxy(tagList.splice(0, tagNum), {
          get(target, prop) {
            if (prop === Symbol.iterator) {
              return target[Symbol.iterator]();
            }
            return target[prop];
          },
          set(target, prop, value) {
            target[prop] = value;
            return true;
          },
        });
      }
      _this.foodDtoEntity.photo = "http://localhost:8080" + _this.foodDtoEntity.photo;
      console.log("create: _this.foodDtoEntity = ", _this.foodDtoEntity);
      for (let i = 0; i < _this.commentLabelList.length; i++) {
        _this.isSelected[_this.commentLabelList[i].toString()] = false;
      }
      console.log("create: _this.isSelected = ", _this.isSelected);
      console.log("response.data.commentList = ", response.data.commentList);
      //先初始化foodFlavor，否则会出错，显示foodFlavor未定义
      _this.foodDtoEntity.foodFlavor = {};
      // 获取该food的评论信息和口味信息
      _this.getFoodComment(1, 10);
    });
  },
  methods: {
    // 切换侧边栏的折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    gotoFood() {
      //返回到上个页面，可能是食品页面/食品推荐页面/识别页面
      let _this = this;
      _this.$router.push({
        path: this.lastpage,
        recognizeResult: this.recognizeResult,
      });
    },
    //查询的关键词设置
    searchCommentByLabel(commentLabel) {
      this.isSelected[commentLabel] = !this.isSelected[commentLabel];
      let index = this.selectTag.findIndex((option) => option === commentLabel);
      //如果数组中有关键词 则删除
      if (index != -1) {
        this.selectTag.splice(index, 1);
      } else {
        //如果没有关键词 则添加
        this.selectTag.push(commentLabel);
      }
      console.log("选择的标签是", this.selectTag);
      this.searchComment();
    },
    //中评设置
    searchMidComment() {
      this.midIsSelected = !this.midIsSelected;
      this.goodIsSelected = false;
      this.lowIsSelected = false;
      if (this.selectLevel == "中") {
        this.selectLevel = "";
      } else {
        this.selectLevel = "中";
      }
      this.searchComment();
    },
    //差评设置
    searchLowComment() {
      this.lowIsSelected = !this.lowIsSelected;
      this.goodIsSelected = false;
      this.midIsSelected = false;
      if (this.selectLevel == "差") {
        this.selectLevel = "";
      } else {
        this.selectLevel = "差";
      }
      this.searchComment();
    },
    //好评设置
    searchGoodComment() {
      this.goodIsSelected = !this.goodIsSelected;
      this.midIsSelected = false;
      this.lowIsSelected = false;
      if (this.selectLevel == "好") {
        this.selectLevel = "";
      } else {
        this.selectLevel = "好";
      }
      this.searchComment();
    },
    searchComment() {
      let url = "/foodcomment?foodID=" + this.foodDtoEntity.id;
      //循环遍历关键词
      if (this.selectTag.length != 0) {
        let len = this.selectTag.length;
        for (let i = 0; i < len; i++) {
          url = url + "&&keyword=" + this.selectTag[i];
        }
      }
      //设置评分的等级
      if (this.selectLevel != "") {
        url = url + "&&starLevel=" + this.selectLevel;
      }
      console.log("请求的url为", url);
      let _this = this;
      this.$http.get(url).then(function (response) {
        _this.foodDtoEntity.commentList = response.data.records;
        console.log("查询后的评价信息为", _this.foodDtoEntity.commentList);
        let len = _this.foodDtoEntity.commentList.length;
        for (let i = 0; i < len; i++) {
          // 设置每条评论的用户头像
          _this.foodDtoEntity.commentList[i].user.avatar =
            "http://localhost:8080" + _this.foodDtoEntity.commentList[i].user.avatar;
        }
      });
    },
    getFoodComment(currentPage, pageSize) {
      let url =
        "/foods/detail/" +
        history.state.foodID +
        "?pageNum=" +
        currentPage +
        "&&pageSize=" +
        pageSize;
      let _this = this;
      console.log("使用current = ", currentPage, "调取API");
      console.log(url);
      // 获取该food的评论信息
      this.$http.get(url).then(function (response) {
        _this.foodDtoEntity.commentList = response.data.commentList.records;
        let len = _this.foodDtoEntity.commentList.length;
        // 更新分页控件的显示数据
        _this.pagination.currentPage = response.data.commentList.current;
        console.log("_this.pagination.currentPage = ", _this.pagination.currentPage);
        _this.pagination.pageSize = response.data.commentList.size;
        _this.pagination.totalCount = parseInt(response.data.commentList.total);
        console.log("commentlist = ", response.data.commentList);

        for (let i = 0; i < len; i++) {
          // 设置每条评论的用户头像
          _this.foodDtoEntity.commentList[i].user.avatar =
            "http://localhost:8080" + _this.foodDtoEntity.commentList[i].user.avatar;
          // 设置每条评论的关键词
          // 设置每条评论的等级
        }
        _this.foodDtoEntity.foodFlavor = response.data.foodFlavor;
        console.log("_this.foodDtoEntity in getcomment() = ", _this.foodDtoEntity);
        console.log(
          "_this.foodDtoEntity.foodFlavor in getcomment() = ",
          _this.foodDtoEntity.foodFlavor
        );
      });
    },
    // 改变分页的每页的页数
    handleSizeChange(size) {
      this.getFoodComment(this.pagination.currentPage, size);
    },
    // 改变分页的当前页面
    handleCurrentChange(currentPage) {
      console.log("跳到第", currentPage, " 页");
      this.getFoodComment(currentPage, this.pagination.pageSize);
    },
  },
};
</script>

<style>
.fooddetail-header {
  margin-top: 30px;
  position: relative;
}

.fooddetail-card {
  /* height: 400px; */
  /* width: 800px; */
  margin: 0 auto;
}

.fooddetail-image {
  float: left;
  width: 300px;
  height: 270px;
  margin: 50px;
  box-shadow: 3px 3px 5px 5px rgba(0, 0, 0, 0.3);
}

.fooddetail-title {
  font-size: 24px;
  text-align: left;
}

/* 食物卡片右侧信息 */
.fooddetail-info {
  float: left;
  margin-top: 40px;
}

/* 描述列表的标题 */
.el-descriptions .el-descriptions__header .el-descriptions__title {
  font-size: 24px !important;
}

/* 描述列表的内容 */
.el-descriptions .el-descriptions__body .el-descriptions__table .el-descriptions__cell {
  font-size: 16px !important;
}

/* 描述列表标签的宽度 */
.fooddetail-des .el-descriptions__label {
  width: 35px;
  display: inline-block;
}

.fooddetail-des .el-descriptions__cell {
  width: 300px;
}

/* 评论部分 */
.comment-left {
  float: left;
  margin: 30px;
}

.comment-avatar {
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border: 3px solid #ffdab9;
}

.comment-username {
  height: 50px;
}

.comment-right {
  float: left;
  width: 890px;
  text-align: left;
  margin: 20px;
}

.fooddetail-classify-row {
  margin-bottom: 20px;
}

.fooddetail-classify-row .el-button:hover,
.fooddetail-classify-row .el-button:focus {
  color: #e3a566;
}

.el-pagination {
  display: flex;
  justify-content: center;
  margin: 10px;
  width: 100%;
}

.el-pagination.is-background .btn-next.is-active,
.el-pagination.is-background .btn-prev.is-active,
.el-pagination.is-background .el-pager li.is-active {
  background-color: #e3a566 !important;
}

.el-pagination.is-background .btn-next:hover,
.el-pagination.is-background .btn-prev:hover,
.el-pagination.is-background .el-pager li:hover {
  color: #e3a566 !important;
}

.levelButton {
  background-color: white !important;
  color: black !important;
  border: none !important;
}
.levelButton:hover {
  background-color: white !important;
  border: none !important;
}
.levelButton:focus {
  background-color: white !important;
  color: black !important;
  border: none !important;
}

.selectedLevelButton {
  background-color: white !important;
  border: 2px solid #e3a566 !important;
  color: #e3a566 !important;
  font-weight: bold !important;
}
.originButton {
  background-color: #e3a566 !important;
  color: white !important;
  border: none !important;
}
.originButton:focus {
  background-color: #e3a566 !important;
  color: white !important;
}
.selectedButton {
  background-color: white !important;
  color: #e3a566 !important;
  font-weight: bold !important;
  border: 2px solid #e3a566 !important;
}
</style>
